<!DOCTYPE html>
<!-- $Id: imapsync_form.html,v 1.85 2019/11/24 17:35:25 gilles Exp gilles $ -->

<html lang="en" id="top">
 
<head>
    <title>Imapsync online</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 
	integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" 
	integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
        
        <link rel="stylesheet" href="imapsync_form.css">

    <link rel="license" href="https://imapsync.lamiral.info/NOLIMIT">


	<noscript>
        <link rel="stylesheet" href="noscript.css">
	</noscript>
	
</head>

<body>


<div class="scripton">
        <!-- will appear if some tests fail -->
        <pre id="tests" class="collapse"></pre>
        <!-- hidden stuff that must exit for the tests -->
        <div class="hidden">
                <input type="checkbox" id="test_checkbox">
                <input type="text" id="test_text">
                <input type="radio" id="test_radio1" name="test_radio" value="first" >
                <input type="radio" id="test_radio2" name="test_radio" value="second" >
        </div>
</div>

<div class="container-fluid" >

    <div class="row">
        <div class="text-center">
            <a href="https://imapsync.lamiral.info/">
            <img alt="Imapsync home" title="Imapsync home page" src="https://imapsync.lamiral.info/X/logo_imapsync_Xn.png" height="38" width="60">
            </a>
            <a href="#top" title="Top of the page" class="btn btn-info " role="button">Top</a>
            <!-- <a href="#payment"  class="btn btn-success" data-toggle="collapse">Pricing</a> -->
            <!-- <a href="#buttons"  class="btn btn-info scripton"  role="button">Consoles</a> -->
            <a href="#bottom" title="Bottom of the page" class="btn btn-info active" role="button">Bottom</a>
        </div>
    </div>

    <h1 class="text-center">Imapsync online</h1>

    <p class="text-center"> <strong>Copy</strong>/synchronize a <strong>complete</strong> mailbox to another, without <strong>duplicates!</strong></p>
    
<!-- Paypal part start 
new: NDGMR6TLFZ926
old: H2YTURNFT4XT4
-->

        <!-- A button above the pricing form, not very beautiful... 
        I should give it a try anyway because nearly no one buy this service...
	<div class="text-center">
	<a href="#payment" class="btn btn-warning btn-lg" data-toggle="collapse">Pricing</a>
	</div>
        -->

<!-- the "in" makes the form not collapsed by default 
     Remove the in in order to mask the pricing section 
     <div id="payment" class="well text-center collapse in" > -->
     <div id="payment" class="well text-center collapse out" >
        <p class="lead">Pay by usage type</p>
        <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">
            <input type="hidden" name="cmd" value="_s-xclick" />
            <input type="hidden" name="hosted_button_id" value="H2YTURNFT4XT4" />
            <input type="hidden" name="on0" value="imapsync choice" />
            <fieldset>
            <!--
            <label data-toggle="tooltip" data-placement="top" title="Fair enough"
            class="radio-inline"><input type="radio" name="os0" value="Tiny"          > €1,00     </label>
            -->
            <label data-toggle="tooltip" data-placement="top" title="A big mailbox"
            class="radio-inline"><input type="radio" name="os0" value="Small" > €6,00    </label>
            <label data-toggle="tooltip" data-placement="top" title="Several mailboxes to migrate"
            class="radio-inline"><input type="radio" name="os0" value="Normal" checked > €59,00  </label>
            <!--
            <label data-toggle="tooltip" data-placement="top" title="Tons of gigabytes to copy"
            class="radio-inline"><input type="radio" name="os0" value="High"          > €125,00   </label>
            -->
            <br>
            <input type="hidden" name="currency_code" value="EUR" />
            <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" name="submit" alt="PayPal - A safe, easy way to pay online!" />
            </fieldset>
        <p>
                <strong>30-day money back guarantee!</strong> <br>
                <em>No question nor condition to get a refund, really, just request it and you'll sure get a refund!</em>
        </p>
        </form>
    </div>
<!-- Paypal part end -->


    <form id="form" action="/cgi-bin/imapsync" method="post" autocomplete="on">
        <div class="row">
            <div id="account1" class="col-md-6" >
                <fieldset>
                <legend class="text-center h2">IMAP source mailbox</legend>

                <label for="user1">Login</label>
                <div class="input-group form-group">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-user"> </i></span>
                    <input
                    data-toggle="tooltip" data-placement="bottom" title="It is usually an email address or its left part before @"
                    type="text" class="form-control input-lg" id="user1" name="user1" tabindex="1"
                    placeholder="Enter login name">
                </div>

                <label for="password1">Password</label>
                <label class="checkbox-inline out">
                    <input type="checkbox" id="showpassword1"> show password
                </label>
                <div class="input-group form-group">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                    <input
                    data-toggle="tooltip" data-placement="bottom" title="Passwords are not stored on the server"
                    type="password" class="form-control input-lg" id="password1" name="password1" tabindex="2"
                     placeholder="Enter password">
                </div>

                <label for="host1">Server</label>
                <div class="input-group form-group">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-cloud"></i></span>
                    <input
                     data-toggle="tooltip" data-placement="bottom" title="IMAP transfers are done with encryption if the servers support it."
                     list="servers1" type="text" class="form-control input-lg" id="host1" name="host1" tabindex="3"
                     placeholder="Enter imap source server name or IP address">
                        <datalist id="servers1">
                        <option value="imap.gmail.com">
                        <option value="outlook.office365.com">
                        <option value="imap.mail.yahoo.com">
                    </datalist>
                </div>
                
                <!--
                <div class="form-group" style="padding-bottom: 15px;">
                <label class="checkbox-inline">
                    <input type="checkbox" id="ssl1" name="ssl1" tabindex="4">-ssl1 (port 993)
                </label>
                </div>
                -->
                <div>
                    <br>
                </div>
                </fieldset>
            </div>


            <div id="account2" class="col-md-6" >
                <fieldset>
                <legend class="text-center h2">IMAP destination mailbox</legend>

                <label for="user2">Login</label>
                <div class="input-group form-group">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                    <input
                    data-toggle="tooltip" data-placement="bottom" title="It is usually an email address or its left part before @"
                    type="text" class="form-control input-lg" id="user2" name="user2" tabindex="6"
                    placeholder="Enter login name">
                </div>
                <label for="password2">Password</label>
                <label class="checkbox-inline out">
                    <input type="checkbox" id="showpassword2"> show password
                </label>
                <div class="input-group form-group">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                    <input
                    data-toggle="tooltip" data-placement="bottom" title="Passwords are not stored on the server"
                    type="password" class="form-control input-lg" id="password2" name="password2" tabindex="7"
                     placeholder="Enter password">
                </div>

                <label for="host2">Server</label>
                <div class="input-group form-group">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-cloud"></i></span>
                    <input
                    data-toggle="tooltip" data-placement="bottom" title="IMAP transfers are done with encryption if the servers support it."
                    list="servers2" type="text" class="form-control input-lg" id="host2" name="host2" tabindex="8"
                     placeholder="Enter imap destination server name or IP address">
                     <datalist id="servers2">
                        <option value="imap.gmail.com">
                        <option value="outlook.office365.com">
                        <option value="imap.mail.yahoo.com">
                     </datalist>
                </div>
                <!--
                <div class="form-group" style="padding-bottom: 15px;">
                    <label class="checkbox-inline">
                    <input type="checkbox" id="ssl2" name="ssl2" tabindex="9">-ssl2 (port 993)
                    </label>
                </div>
                -->
                 <div>
                    <br>
                </div>
                </fieldset>
           </div>
          
        </div>
        <input type="hidden" name="automap"   value="on">
        <input type="hidden" name="addheader" value="on">
        <!-- -#->
        <input type="hidden" name="simulong" value="360">
        <!-#- -->
        <a id="buttons"></a>
        <hr> 
        
        <!-- Classical button to go to the log only -->
        <noscript>
                <button type="submit" class="btn btn-success btn-lg center-block btn-block">Go sync!</button> 
        </noscript>

        <!-- Javascript buttons using xhr -->
        <div class="row scripton">
            <div class="col-sm-6 padd0" >
            <button id="bt-sync" type="button"
                    class="btn btn-success btn-lg center-block btn-block"
                    tabindex="11"
                    data-toggle="tooltip" data-placement="top" 
                    title="Launch the sync! You can abort the sync with the red Abort button nearby or by closing the tab/window."
                    >
                Sync or resync!<br>
                <span class="glyphicon glyphicon-envelope"></span>
                <span class="glyphicon glyphicon-arrow-right"></span>
                <span class="glyphicon glyphicon-envelope"></span>
            </button>
            </div>
            <div class="col-sm-6 padd0" >
            <button id="bt-abort" type="button" 
                    class="btn btn-danger btn-lg center-block  btn-block" tabindex="12"
                    data-toggle="tooltip" data-placement="top" 
                    title="Abort the sync! You can restart the sync later, no duplicates should happen."
            >
            Abort!<br>
                <span class="glyphicon glyphicon-scissors"></span>
            </button>
            </div>
        </div>
    </form>


    <div class="row scripton" id="consoles">
    
        <pre id="progress-txt">ETA: Estimation Time of Arrival</pre>

        <div class="progress">
                <div id="progress-bar-done" class="progress-bar progress-bar-success" role="progressbar">
                Progress bar 
                </div>
                <div id="progress-bar-left" class="progress-bar progress-bar-info" role="progressbar">
                Progress bar
                </div>
        </div>
        
        <div class="col-sm-6 well">
            <h2 class="text-center">Console of imapsync run</h2>
            <pre id="console">



            </pre>
            <a id="link_to_bottom" href="#bottom">Bottom of imapsync log</a>
        </div>

        <div class="col-sm-6 well">
            <h2 class="text-center">Console of abort</h2>
            <pre id="abort">



            </pre>
        </div>
    </div>
	
</div>

<h2 class="text-center scripton">Log of imapsync run</h2>

<pre id="output" class="scripton">


















</pre>

<a id="bottom"></a>
<hr>
<p class="text-center">
        Local bandwidth statistics <br>
            <a href="/vnstat/vnstati.html">
                <img alt="Local bandwidth statistics" src="/vnstat/vnstat_vs.png" >
            </a>
</p>

    <p class="text-center">Feel free to contact 
    <strong><a  href="https://imapsync.lamiral.info/#AUTHOR" target="_blank">Gilles LAMIRAL</a></strong>
    </p>


<div class="container-fluid" >
    <div class="row">
        <div class="text-center">
            <a href="https://imapsync.lamiral.info/">
                <img alt="Imapsync home page" src="https://imapsync.lamiral.info/X/logo_imapsync_Xn.png" height="38" width="60">
            </a>
            <a href="#top" title="Top of the page" class="btn btn-info " role="button">Top</a>
            <!-- <a href="#buttons"  class="btn btn-info scripton" role="button">Consoles</a> -->
            <a href="#bottom" title="Bottom of the page" class="btn btn-info active" role="button">Bottom</a>
            <br>
        <small> ($Id: imapsync_form.html,v 1.85 2019/11/24 17:35:25 gilles Exp gilles $) </small><br>
        Terms and conditions for anything: <a href="https://imapsync.lamiral.info/LICENSE">No limits to do anything with this work and this license!</a><br>
        </div>
    </div>
</div>


<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"
integrity="sha384-xBuQ/xzmlsLoJpyjoggmTEz8OWUFM0/RC5BsqQBDX2v5cMvDHcMakNTNrHIW2I5f"
crossorigin="anonymous"
>
</script>

<script 
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" 
crossorigin="anonymous"
>
</script>


<script
src="imapsync_form.js"
>
</script>

</body>
</html>
